<script setup name="pageLoginLogs">
import { ref, onMounted } from 'vue'
import * as funUser from '@/apis/system/user'

// 查询条件
const listQuery = ref({
    keywords: null,
    page: 1,
    size: $Common.appPageSize
})
const tableData = ref([])
const isPagination = ref(false)
const total = ref(0)
const pageSizes = $Common.appPageSizes
const tableDateFormat = $Common.tableDateFormat

// 初始化数据
onMounted (() => {
    getListData()
})

// 分页查询
const handleSizeChange = (val) => {
    $Common.fullLoading()
    listQuery.value.size = val
    getListData()
}
const handleCurrentChange = (val) => {
    $Common.fullLoading()
    listQuery.value.page = val
    getListData()
}

// 查询数据
const getListData = async () => {
    $Common.fullLoading()
    funUser.getLoginLogs(listQuery.value).then(response => {
        $Common.closeFullLoading()
        total.value = response.totalCount || 0
        isPagination.value = response.totalCount > 0 || false
        if (response && response.items && response.items.length > 0) {
            tableData.value = response.items
        } else {
            tableData.value = []
        }
    })
}

const _search = () => {
    listQuery.value.page = 1
    getListData()
}
</script>

<template>
    <div class="page-loginlogs">
        <el-table :data="tableData" size="large" border>
            <el-table-column label="用户ID" prop="userId"></el-table-column>
            <el-table-column label="用户名" prop="userName"></el-table-column>
            <el-table-column label="IP" prop="clientIpAddress"></el-table-column>
            <el-table-column label="登录时间" prop="creationTime" :formatter="tableDateFormat" min-width="100"></el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                :current-page="listQuery.page" :page-sizes="pageSizes" :page-size="listQuery.size" 
                :hide-on-single-page="false" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.page-loginlogs {}
</style>